<script lang="ts" setup>
import CNav from '@/components/CNav.vue'
import CTweetCard from '@/components/CTweetCard.vue'
import { useScript } from './message_hook'

const {
  mainPost,
  dataList,
  refreshEmabled,
  isRefreshing,
  goBack,
  gotoSelfInfo,
  loadMoreComments,
  refreshComments,
  gotoUserInfo,
} = useScript()
</script>

<template>
  <view class="container">
    <CNav left-text="返回" @left-click="goBack" title="消息" />

    <!-- 主帖部分 -->
    <CTweetCard
      :id="mainPost?.id"
      :avatar="mainPost?.avatar"
      :name="mainPost?.nickname"
      :handle="mainPost?.username"
      :time="(mainPost?.createtime as string)"
      :content="mainPost?.content"
      :is-action="false"
      @click="gotoSelfInfo()"
    />

    <!-- 评论部分（带滑动区域） -->
    <view v-if="dataList.length === 0" style="padding: 10px">
      <uv-empty mode="message" icon="https://cdn.uviewui.com/uview/empty/message.png"></uv-empty>
    </view>

    <scroll-view
      class="comments-section"
      :scroll-y="true"
      :refresher-enabled="refreshEmabled"
      :refresher-triggered="isRefreshing"
      @scrolltolower="loadMoreComments"
      @refresherrefresh="refreshComments"
    >
      <CTweetCard
        v-for="(comment, index) in dataList"
        :id="comment.id"
        :user_id="comment.user_id"
        :key="index"
        :avatar="comment.avatar"
        :name="comment.nickname"
        :handle="comment.username"
        :time="(comment.createtime as string)"
        :content="comment.content"
        :is-liked="comment.is_liked"
        :is-collected="comment.is_collected"
        @gotoinfo="gotoUserInfo"
      />
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  .comments-section {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
